<template>
  <div class="container">
    <el-slider v-model="dataJson.height" show-input> </el-slider>
    <div class="line">
      <p
        style="font-size: 14px;
    color: #999;
    padding: 10px 0;"
      >
        组件之间默认为0px，如果想增大组件之间的距离，可以使用空白占位组件，该组件可以自定义颜色和透明度，只做占据高度用。
      </p>
    </div>
    <div class="line">
      <div class="left">背景颜色</div>
      <div class="colorOption">
        <div class="divs">
          {{ dataJson.backgroundColor }}
        </div>

        <el-color-picker
          v-model="dataJson.backgroundColor"
          show-alpha
          size="medium"
          class="colorPicker"
        ></el-color-picker>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataJson: {
      type: Object,
      default: () => {}
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/decorate.scss";
</style>
